<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Word Waffle</title>
	<?php require "wwdb.php"; ?>
	<meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=1.2, minimum-scale=0.75, user-scalable=yes" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/sunny/jquery-ui.css" type="text/css" media="all" />
	<link rel="stylesheet" type="text/css" href="WW.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
	<script src="cookies.js" type="text/javascript"></script>
	<script src="iPhoneFriendly.js" type="text/javascript"></script>
	<script type="text/javascript">
		//auto-refresh every 5 seconds
		var refreshId = setInterval(refreshScreen,5000);
		$("*").click(function() {
			clearInterval(refreshId);
			refreshId = setInterval(refreshScreen,5000);
		});
		//window.scrollTo(0, 1);
		$.ajaxSetup({ cache: false });
		var myKey = <?php echo cleanparam("sesskey"); ?>;
		var gid = <?php echo cleanparam("gameID"); ?>;
		function refreshScreen() {
			$("#playerList").load("getPlayerList.php?sesskey=" + myKey + "&gameID=" + gid);
			$.get("getGameState.php?gameID=" + gid,function(gameState){
				switch(parseInt(gameState)) {
				case 1: //game unstarted
					$("#playerStatus").load("getGameStatus.php?sesskey=" + myKey + "&gameID=" + gid);
					break;
				case 2: //game in progress
					$("#start").hide();
					$("#playerStatus").text("");
					$.ajax({
						url: "player.php",
						data: {sesskey: myKey, gameID: gid },
						dataType: "html",
						success: function(whoseTurn){
							if (isNaN(whoseTurn)) { $("#errorMsg").html(whoseTurn); }
							else { 
								if (whoseTurn == 1) { //my turn!
									$("#errorMsg").html("");
									$("#chooseDialog").show();
									$("#chooseDialog").attr("title","Your turn to choose!").dialog({
										dialogClass:"wwDialog", width:380, height:"auto", position:"top", modal:true, draggable:false, resizable:false
									});
								}
							}
						}
					});
					break;
				case 3: //game is over
					$(location).attr("href","showScores.php?gameID=" + gid);
					break;
				}
			});
		}

		$(document).ready(function(){
			checkCookie();
			refreshScreen();
			
			$("#start").click(function(){
				$.ajax({
					url: "startGame.php",
					data: {sesskey: myKey, gameID: gid},
					success: function(results){
						if (isNaN(results)) { $("#errorMsg").html(results); }
						else { refreshScreen(); }
					}
				});
				refreshScreen();
			});

			$(".choose").click(function(){
				var myLetter = $(this).text();
				$.ajax({		
					url: "chooseLetter.php",
					data: {letter: myLetter, sesskey: myKey, gameID: gid },
					success: function(results){
						if (isNaN(results)) { $("#errorMsg").html(results); }
						else {
							$("#chooseDialog").dialog("close");
							refreshScreen();
							$(".undo").show();
						}
					}
				});				
			});

			$(".cellWrapper").click(function(){
				var c = $(this).attr("id");
				$.ajax({		
					url: "placeLetter.php",
					data: {cell: c, sesskey: myKey, gameID: gid },
					success: function(results){
						if (results.length > 1) { $("#errorMsg").html(results); }
						else {
							$("#" + c).addClass("syrup", 1000).children().text(results);
							$("#errorMsg").html("");
							$(".undo").show();
							refreshScreen();
						}
					}
				});
			});

			$(".undo").click(function(){
				$("#chooseDialog").dialog("close");
				$.ajax({
					url: "undo.php",
					data: {sesskey: myKey, gameID: gid },
					success: function(c){
						if (isNaN(c)) {
							$("#errorMsg").html(c);
						}
						else {
							if (c > 10) { //two-digit number is the cell to erase
								$("#x" + c).removeClass("syrup", 1000).children().text("");
								$("#chooseDialog").dialog("close");
							}
							refreshScreen();
						}
					}
				});
			});
			
			//this needs to get fixed
			$("#logout").click(function(){
				$.ajax({
					url: "canIPlay.php",
					data: {name: $("#name").val(), password: $("#password").val(), logout: "true" },
					success: function(results){
						if (isNaN(results)) { $("#errorMsg").html(results); }
						else { //successful logoff
							setCookie("pw","",1);
							setCookie("username","",1);
							window.location="index.php";
						}
					}
				});
			});
		});
	</script>
</head>
<body>
<div id="container">
	<?php require "banner.htm"; ?>
	<div id="top">
		<div id="playerStatus"></div>
		<div id="playerList"></div>
		<button id="start">Start game with these players</button>
		<div id="errorMsg"></div>
		<span class="hidden undo fakeLink">UNDO</span>
	</div>
	<div style="clear:both" />
	<div class="waffleWrapper">
		<div class="waffle">
		<?php
			require("waffle.php");
			for ($i=1;$i<=5;$i++) {
				for ($j=1;$j<=5;$j++) { //fill any already-chosen letters
					$l = lookupCell(cleanparam("gameID"), cleanparam("sesskey"), $i, $j);
					if ($l != null)
						echo "<div class='cellWrapper syrup' id='x$i$j'><div class='letter cell'>$l</div></div>";
					else
						echo "<div class='cellWrapper' id='x$i$j'><div class='letter cell'></div></div>";
				}
				echo "<div style='clear:both'></div>";
			}
		?>
		</div>
	</div>
	<div id="chooseDialog" class="dialogInit">
	<?php for($i=65;$i<65+26;$i++) $l .= "<span class='choose letter'>" . chr($i) . "</span>&nbsp; ";
		echo trim($l) . "&nbsp;<span class='fakeLink undo'>UNDO</span>";
	?>
	</div>
	<div id="confirmDialog" class="dialogInit"></div>
</div>
</body>
</html>